<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CRUD</title>
    <style>
        table tr td{
            text-align: center;
        }

        template {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <p><label>搜索:</label><input type="text" v-model="searchStr"></p>
        <grid-table :col-name-grid="colName" :table-data-grid="tableData" :search-str-grid="searchStr"></grid-table>
    </div>
    <template id="gridTable">
        <table border="1">
            <thead>
                <tr>
                    <td v-for="col in colNameGrid">{{ col | capitalize }}</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(user, index) in filteredData">
                    <td>{{ index + 1 }}</td>
                    <td v-for="property in user">{{ property }}</td>
                    <td><button @click="delUser(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('grid-table', {
        template: "#gridTable",
        props: {
            searchStrGrid: String,
            colNameGrid: Array,
            tableDataGrid: Array
        },
        filters: {
            // 首字母转大写
            capitalize: function(value) {
                if(!value){
                    return "";
                }
                value = value.toString();
                return value.charAt(0).toUpperCase() + value.slice(1);
            }
        },
        computed: {
            // 字符查找过滤
            filteredData: function () {
                var self = this;
                return this.tableDataGrid.filter(function (user) {
                    return user.name.toLowerCase().indexOf(self.searchStrGrid.toLowerCase()) != -1 ||
                        user.sex.toLowerCase().indexOf(self.searchStrGrid.toLowerCase()) != -1 ||
                        user.age.toString().toLowerCase().indexOf(self.searchStrGrid.toLowerCase()) != -1;
                });
            }
        },
        methods: {
            delUser: function(index) {
                this.tableDataGrid.splice(index, 1);
            }
        }
    });
    
    var app = new Vue({
        el: '#app',
        data: {
            searchStr: '',
            colName: ['no', 'name', 'sex', 'age', 'option'],
            tableData: [{
                name: 'Jack',
                sex: '男',
                age: 32
            },{
                name: '王明',
                sex: '男',
                age: 43
            },{
                name: 'Lili',
                sex: '女',
                age: 24
            },{
                name: '李玲',
                sex: '女',
                age: 19
            }]
        }
    });
</script>
</html>